// 1. React核心库
import React, { useState, useEffect } from 'react';

// 2. UI组件库 - 按字母顺序
import { Card, message, Breadcrumb } from 'antd';

// 3. 图标库
import { MessageOutlined, HomeOutlined, CommentOutlined } from '@ant-design/icons';

// 4. 专业组件库
import { PageContainer } from '@ant-design/pro-components';

// 5. 工具库
import { useParams, Link } from '@umijs/max';

// 7. 项目内部模块
import { apiClients } from '@/services/apiClient';
import { autoLoginInDev } from '@/utils/autoLogin';
import ChatInterface from './components/ChatInterface';

// 8. 生成的类型定义 (必须使用，禁止手工定义)
import type { AIConversation, MessageTemplate } from '@/services/generated';

const ConversationChat: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const [conversation, setConversation] = useState<AIConversation | null>(null);
  const [loading, setLoading] = useState(false);
  const [selectedTemplate, setSelectedTemplate] = useState<string>('');

  useEffect(() => {
    const fetchConversation = async () => {
      try {
        setLoading(true);
        await autoLoginInDev();
        const response = await apiClients.aiChat.aiChatConversationsRetrieve({ id: id! });
        setConversation(response.data);
      } catch (error) {
        message.error('获取对话信息失败');
      } finally {
        setLoading(false);
      }
    };

    if (id) {
      fetchConversation();
    }
  }, [id]);

  // 处理对话更新
  const handleConversationUpdate = (updatedConversation: AIConversation) => {
    setConversation(updatedConversation);
  };

  // 处理模板选择
  const handleTemplateSelect = (template: MessageTemplate) => {
    setSelectedTemplate(template.content || '');
  };

  return (
    <PageContainer
      loading={loading}
      header={{
        title: (
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <MessageOutlined />
            <span>AI对话</span>
          </div>
        ),
        subTitle: conversation?.title || '加载中...',
        breadcrumb: {
          items: [
            {
              path: '/',
              title: <HomeOutlined />,
            },
            {
              path: '/ai-chat/conversations',
              title: (
                <Link to="/ai-chat/conversations">
                  <CommentOutlined style={{ marginRight: 4 }} />
                  对话管理
                </Link>
              ),
            },
            {
              title: '聊天对话',
            },
          ],
        },
      }}
      content={conversation && (
        <div style={{ color: '#666', fontSize: '14px' }}>
          模型: {conversation.ai_model_name || '未设置'} | 
          角色: {conversation.ai_role_name || '未设置'} | 
          消息数: {conversation.message_count || 0} 条
        </div>
      )}
    >
      <Card>
        <ChatInterface 
          conversation={conversation} 
          selectedTemplate={selectedTemplate}
          onTemplateUsed={() => setSelectedTemplate('')}
          onConversationUpdate={handleConversationUpdate}
          onTemplateSelect={handleTemplateSelect}
        />
      </Card>
    </PageContainer>
  );
};

export default ConversationChat;